<PageHeader as |p|>
  <p.top>
    <KeyValueHeader 
      @baseKey={{hash id=model.id}} 
      @path="vault.cluster.secrets.backend.list" 
      @mode="show" 
      @root={{hash
        label=model.engineId
        text=model.engineId
        path="vault.cluster.secrets.backend.list-root"
        model=model.engineId }}
      @showCurrent={{true}} 
    />
  </p.top>
  <p.levelLeft>
    <h1 class="title is-3">
      Version History
    </h1>
  </p.levelLeft>
</PageHeader>
<ListView @items={{reverse model.versions}} @itemNoun="version" as |list|>
  <ListItem @hasMenu={{false}} @linkParams={{array 'vault.cluster.secrets.backend.show' model.id (query-params version=list.item.version) }} as |Item|>
    <Item.content>
      <div class="columns is-flex-1">
        <div>
          <Icon @glyph="file-outline" class="has-text-grey" />
          Version {{list.item.version}}
        </div>
        {{#if (eq list.item.version model.currentVersion)}}
          <div class="column is-1">
            <span class="has-text-success is-size-9">
              <Icon @glyph="check-circle-fill" />Current
            </span>
          </div>
        {{/if}}
        {{#if list.item.deleted}}
          <div class="column is-1">
            <span class="has-text-grey is-size-8">
              <Icon @glyph="cancel-square-fill" />Deleted
            </span>
          </div>
        {{/if}}
        {{#if list.item.destroyed}}
          <div class="column is-1">
            <span class="has-text-danger is-size-8">
              <Icon @glyph="cancel-square-fill" />Destroyed
            </span>      
          </div>
        {{/if}}    
      </div>
    </Item.content>
    <Item.menu>
      <BasicDropdown
        @class="popup-menu"
        @horizontalPosition="auto-right"
        @verticalPosition="below"
        as |D|
      >
        <D.trigger
          data-test-popup-menu-trigger="true"
          @class={{concat "toolbar-link" (if D.isOpen " is-active")}}
          @tagName="button"
        >
          <Icon aria-label="More options" @glyph="more-horizontal" class="has-text-black auto-width" />
        </D.trigger>
        <D.content @class="popup-menu-content ">
          <nav class="box menu">
            <ul class="menu-list">
              <li class="action">
                <SecretLink
                  @data-test-version
                  @mode="show"
                  @secret={{model.id}}
                  @class="has-text-black has-text-weight-semibold"
                  @queryParams={{query-params version=list.item.version}}
                >
                  View version {{list.item.version}}
                </SecretLink>
              </li>
              <li class="action">
                <SecretLink
                  @mode="edit"
                  @secret={{model.id}}
                  @class="has-text-black has-text-weight-semibold"
                  @queryParams={{query-params version=list.item.version}}
                >
                  Create new version from {{list.item.version}}
                </SecretLink>
              </li>
            </ul>
          </nav>
        </D.content>
      </BasicDropdown>
    </Item.menu>
  </ListItem>
</ListView>
